<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>园区信息管理</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入boxicons -->
    <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
    <style>
        .section-card {
            margin-bottom: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,0,0,.1);
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
        }

        .header-actions {
            display: flex;
            align-items: center;
        }

        .section-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
            margin: 0;
        }

        .section-content {
            padding: 20px;
        }

        .park-container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: calc(100vh - 40px);
        }

        .el-card {
            margin-bottom: 20px;
        }

        .statistics-row {
            margin-bottom: 20px;
        }

        .stat-card {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            border-radius: 8px;
            padding: 24px;
            text-align: center;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.05);
            transition: all 0.3s;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid #ebeef5;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 16px rgba(0,0,0,.1);
            border-color: #e6e6e6;
        }

        .stat-icon {
            font-size: 36px;
            width: 64px;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 16px;
            margin-bottom: 16px;
            background: rgba(64,158,255,.1);
            color: #409EFF;
        }

        .stat-value {
            font-size: 28px;
            font-weight: 600;
            color: #303133;
            margin: 8px 0;
            line-height: 1.2;
        }

        .stat-label {
            color: #909399;
            font-size: 14px;
            margin-top: 4px;
        }

        .el-table {
            margin-top: 10px;
        }

        .el-table th {
            background-color: #f5f7fa;
        }

        .el-button-group {
            margin-right: 10px;
        }

        .el-tag {
            font-weight: 500;
        }

        .tab-container {
            padding: 20px;
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0,0,0,.1);
        }

        .el-tabs__header {
            margin-bottom: 25px;
        }

        .person-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 8px;
            background-color: #e6f1fc;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #409EFF;
        }

        .room-info-card {
            margin-bottom: 15px;
            cursor: pointer;
            transition: all 0.3s;
        }

        .room-info-card:hover {
            transform: translateX(5px);
        }

        .room-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }

        .room-title {
            font-size: 16px;
            font-weight: 600;
            color: #303133;
        }

        .room-metrics {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #ebeef5;
        }

        .metric-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .metric-icon {
            font-size: 18px;
            color: #909399;
        }
    </style>
</head>
<body>
    <div id="park-info" class="park-container">
        <!-- 统计概览（已删除） -->
        <!-- <el-row :gutter="24" class="statistics-row"> ... </el-row> -->
        <!-- 使用标签页组织内容 -->
        <el-tabs v-model="activeTab" class="tab-container" style="margin-top: 0;">
            <el-tab-pane name="park">
                <el-card class="section-card">
                    <div class="section-header" style="border-bottom:none; padding-bottom:0;">
                        <div class="header-actions" style="margin-left:auto;">
                            <el-button type="primary" size="small" @click="handleAddProject">
                                <i class='bx bx-plus'></i> 新增项目
                            </el-button>
                        </div>
                    </div>
                    <div class="section-content" style="padding-top:10px;">
                        <el-table :data="projects" style="width: 100%">
                            <el-table-column prop="name" label="项目名称"></el-table-column>
                            <el-table-column prop="shortName" label="项目简称" width="120"></el-table-column>
                            <el-table-column prop="code" label="项目编号" width="120"></el-table-column>
                            <el-table-column prop="address" label="项目地址" width="200"></el-table-column>
                            <el-table-column label="操作" width="180" fixed="right">
                                <template slot-scope="scope">
                                    <el-button-group>
                                        <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
                                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>

    <!-- 引入Vue和Element UI的JS文件 -->
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        Vue.use(ELEMENT);
        
        new Vue({
            el: '#park-info',
            data() {
                return {
                    activeTab: 'park',
                    selectedZone: '',
                    projects: [
                        {
                            name: '智慧园区A区',
                            shortName: '智慧A区',
                            code: 'PARK-001',
                            address: '北京市朝阳区XX路1号'
                        },
                        {
                            name: '智慧园区B区',
                            shortName: '智慧B区',
                            code: 'PARK-002',
                            address: '上海市浦东新区YY路2号'
                        }
                    ],
                    zones: [
                        {
                            name: 'A区办公楼',
                            area: '5000',
                            buildingCount: 2,
                            usage: '办公',
                            roomCount: 2
                        },
                        {
                            name: 'A区商业街',
                            area: '3000',
                            buildingCount: 5,
                            usage: '商业',
                            roomCount: 1
                        }
                    ],
                    rooms: [
                        {
                            id: 1,
                            name: '主控机房',
                            zone: 'A区办公楼',
                            location: '1楼东侧',
                            deviceCount: 50,
                            temperature: 24.5,
                            humidity: 45,
                            status: '正常'
                        },
                        {
                            id: 2,
                            name: '网络机房',
                            zone: 'A区办公楼',
                            location: '2楼西侧',
                            deviceCount: 30,
                            temperature: 25.8,
                            humidity: 48,
                            status: '正常'
                        },
                        {
                            id: 3,
                            name: '商业区机房',
                            zone: 'A区商业街',
                            location: '地下一层',
                            deviceCount: 25,
                            temperature: 27.2,
                            humidity: 52,
                            status: '异常'
                        }
                    ],
                    persons: [
                        {
                            name: '张三',
                            position: '物业主管',
                            phone: '13800138000',
                            account: 'zhangsan',
                            department: '物业部'
                        },
                        {
                            name: '李四',
                            position: '安保队长',
                            phone: '13800138001',
                            account: 'lisi',
                            department: '安保部'
                        },
                        {
                            name: '王五',
                            position: '维修工程师',
                            phone: '13800138002',
                            account: 'wangwu',
                            department: '工程部'
                        }
                    ],
                    roomSearch: '',
                    personSearch: ''
                }
            },
            computed: {
                totalProjects() {
                    return this.projects.length;
                },
                totalZones() {
                    return this.zones.length;
                },
                totalRooms() {
                    return this.rooms.length;
                },
                totalDevices() {
                    return this.rooms.reduce((sum, room) => sum + room.deviceCount, 0);
                },
                filteredRooms() {
                    let result = this.rooms;
                    
                    if (this.selectedZone) {
                        result = result.filter(room => room.zone === this.selectedZone);
                    }
                    
                    const search = this.roomSearch.toLowerCase();
                    return result.filter(room => {
                        return room.name.toLowerCase().includes(search) ||
                               room.zone.toLowerCase().includes(search) ||
                               room.location.toLowerCase().includes(search);
                    });
                },
                filteredPersons() {
                    const search = this.personSearch.toLowerCase();
                    return this.persons.filter(person => {
                        return person.name.toLowerCase().includes(search) ||
                               person.position.toLowerCase().includes(search) ||
                               person.department.toLowerCase().includes(search) ||
                               person.account.toLowerCase().includes(search);
                    });
                }
            },
            methods: {
                handleAddProject() {
                    this.$message({
                        message: '新增项目功能开发中...',
                        type: 'info'
                    });
                },
                handleAddZone() {
                    this.$message({
                        message: '新增分区功能开发中...',
                        type: 'info'
                    });
                },
                handleAddRoom() {
                    this.$message({
                        message: '新增机房功能开发中...',
                        type: 'info'
                    });
                },
                handleAddPerson() {
                    this.$message({
                        message: '新增人员功能开发中...',
                        type: 'info'
                    });
                },
                handleEdit(row) {
                    this.$message({
                        message: '编辑功能开发中...',
                        type: 'info'
                    });
                },
                handleDelete(row) {
                    this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                },
                handleMonitor(row) {
                    this.$message({
                        message: '监控功能开发中...',
                        type: 'info'
                    });
                },
                handleViewRooms(zone) {
                    this.activeTab = 'room';
                    this.selectedZone = zone.name;
                }
            }
        })
    </script>
</body>
</html>
